import React, { useEffect } from "react";
import { connect } from "react-redux";
import { compose } from "recompose";
import { message } from "antd";
import Header from "../../components/home/header";
import BillWrap from "../../components/bill/billWrap";
import { withRouter } from "react-router-dom";
import Loading from "../../components/base/loading";
import "assets/less/view/bill/index.less";

const Bill = props => {
  const { isLogin, isRender, history } = props;

  useEffect(() => {
    if (isRender && !isLogin) {
      history.push("/login");
      message.error("请先登录！", 1);
    }
    document.title = "白 - 账单"
  }, [isLogin, isRender]);

  return (
    <div className="home bill">
      {isRender ? (
        isLogin ? (
          <>
            <Header />
            <BillWrap />
          </>
        ) : null
      ) : (
        <Loading />
      )}
    </div>
  );
};

export default compose(
  connect(store => ({
    isLogin: store.home.isLogin,
    isRender: store.home.isRender
  })),
  withRouter
)(Bill);
